<template>
    <!-- 团组织架构 -->
    <base-breadcrumb :title="$route.meta.title">
        <a-row :gutter="10" class="page-height">
            <!-- 树搜索 -->
            <a-col :span="6">
                <a-card  class="page-height-tree">
                    <title-name title="团组织架构"></title-name>
                    <!-- 团组织树搜索 -->
                        <!-- :expandByAuto="true" -->
                    <TreeLeagueOrg
                        ref="treeOrganization"
                        @loader="getTable"
                        :datas="treeDataList"
                        :defaultSelectedKeys="defKeys"
                        :selectedKeys.sync="selectedKeys"
                        :selectOptions.sync="selectOptions"
                        :showChildWithSearch="true"
                        :istakeOutHight="true"
                    />
                </a-card>
            </a-col>
            <a-col :span="18" class="page-height-list-wrapper">
                <!-- 搜索 -->
                <searchData :searchData="searchArr" @search="search"></searchData>
                <!-- 表格 -->

                <a-card :bordered="false" class="page-height-list">
                    <!-- <title-name title="组织信息列表"></title-name> -->
                    <a-button
                        class="mb12"
                        icon="plus"
                        type="primary"
                        v-btnPermission="'pa_012_add_01'"
                        :disabled="(selectedKeys.length==0) || selectOptions.orgType == 3"
                        @click="showAddModal('add')"
                        >新增团组织</a-button
                    >
                    <!-- 表格 -->
                    <list-table
                        ref="table"
                        size="default"
                        rowKey="id"
                        :columns="columns"
                        :request="loadData"
                        :alert="true"
                        show-size-changer
                        show-quick-jumper
                        showPagination="auto"
                    >
                        <span slot="orgStatus" slot-scope="text, record">
                            {{text == 0 ? '审批中' : '正常'}}
                        </span>
                        <template slot="action" slot-scope="text, record">
                            <!-- -->
                            <MoreButton>
                            <a v-btnPermission="'pa_012_loo_02'" @click="handleManage('look', record)">查看</a>
                                  <span v-btnPermission="'pa_012_set_03'">
                                    <a @click="showAddModal('edit', record)">组织信息设置</a>
                                  </span>
                                  <span v-btnPermission="'pa_012_cha_04'" v-if="record.orgStatus == 1">
                                    <a @click="showAddModal('change', record)">换届</a>
                                  </span>
                                  <span v-btnPermission="'pa_012_rev_05'" v-if="record.orgStatus == 1 && record.orgType == 3">
                                    <a @click="handleManage('cancel', record)">撤销</a>
                                  </span>
                            </MoreButton>
                        </template>
                    </list-table>
                </a-card>
            </a-col>
        </a-row>
        
        <AddPartyOrg
          :visible.sync="modalInfo.visible"
          :modalType="modalInfo.type"
          :curId="modalInfo.id"
          :selectOptions="selectOptions"
          @submitSuccess="refresh"
        >
        </AddPartyOrg>
    </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import Selector from '@/components/Select/Selector'
import BasePage from '@/views/basePage' // 基础配置
import TreeLeagueOrg from '@/components/businessComponents/TreeLeagueOrg' // 树

import AddPartyOrg from './add.vue';
import LeagueLevelSelect from '../../componments/leagueLevelSelect.vue'
import { getPartyOrgByIdAndSearch, cancelByPrimaryKey } from '@/api/partyMasses/leagueManage'
const searchArr = [
    // 搜索框
    {
      name: '组织名称',
      type: 'input',
      value: 'youthOrgName',
    },
    {
      name: '组织层级',
      valueKey: 'orgType',
      type: LeagueLevelSelect,
    },
]
const columns = [
    {
        title: '序号',
        width: 60,
        dataIndex: 'index',
        customRender() {
            return arguments[2] + 1
        },
    },
    {
        title: '组织名称',
        dataIndex: 'youthOrgName',
    },
    {
        title: '组织类型',
        width: '90px',
        dataIndex: 'orgTypeName',
    },
    {
        title: '组织书记',
        width: '220px',
        ellipsis: true,
        dataIndex: 'orgSecretary',
    },
    {
        title: '团员人数',
        width: '90px',
        dataIndex: 'memberTotal',
    },
    {
        title: '组织成立时间',
        width: '120px',
        dataIndex: 'orgRegtime',
    },
    {
        title: '组织状态',
        dataIndex: 'orgStatus',
        width: '90px',
        scopedSlots: { customRender: 'orgStatus' },
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: '120px',
        // align: 'center',
        scopedSlots: { customRender: 'action' },
    },
]
export default {
  name:'a'+ Date.now(),
    extends: new BasePage(),
    components: {
        STable,
        TreeLeagueOrg,
        AddPartyOrg,
        LeagueLevelSelect,
    },
    data() {
        this.columns = columns
        this.searchArr = searchArr
        return {
            queryParam: {}, // 查询参数
            treeDataList: [],
            defOptions: {},
            defKeys: [],
            selectOptions: {}, // 选中节点对象
            selectedKeys: [],
            modalInfo: {
              visible: false,
              type: 'add',
              id: null
            },
            addModalVisible: false,
            loadData: (parameter) => {
                const query = {
                  id:this.selectedKeys.length ? this.selectedKeys[0] : '',
                  ...this.queryParam
                }
                const requestParameters = Object.assign({}, parameter, { query: query })
                return getPartyOrgByIdAndSearch(requestParameters).then((res) => {
                    const obj = {
                      code:200,
                      data: res.data.list || [],
                      totalSize: res.data.total,
                      currentPage: res.data.pageNum
                    }
                    return obj
                })
            }, // 加载数据方法 必须为 Promise 对象

            form: {},
        }
    },
    mounted() {
      this.refresh()
    },
    methods: {
        refresh() {
          this.$refs.treeOrganization.getList().then((res) => {
              const def = this.treeDataList.find((item) => {
                return (!item.disabled)
              })
              this.defOptions = def;
              this.selectOptions = def;
              this.selectedKeys = def ? [def.id] : [];
              this.defKeys = def ? [def.id] : [];
              this.$refs.table.refresh()
          })
        },
        // 搜索
        search(value) {
          if(value) {
            this.queryParam = {
              ...value
            }
          };
          this.$refs.table.refresh()
        },
        getTable(value) {
            this.$refs.table.refresh()
        },
        showAddModal(type, record) {
          this.modalInfo.visible = true;
          this.modalInfo.type = type;
          this.modalInfo.id = record ? record.id : null;
        },
        // 操作栏
        handleManage(type, record, addpersion = 'false') {
          if (type == 'look') {
            this.$router.push({
                name: 'LeagueManageOrgStructureDetail',
                query: {
                  id: record.id || ''
                }
            })
          } else if (type == 'cancel') {
            let _this = this;
            this.$confirm({
              title: '温馨提示',
              content: '确定要进行撤销？',
              onOk() {
                return new Promise((resolve, reject) => {
                  cancelByPrimaryKey({id: record.id}).then((res) => {
                    resolve();
                    if ((res && res.code == 0) || (res && res.data && res.data.code == 0)) {
                      _this.$message.success('撤销成功');
                      _this.refresh()
                    } else {
                       _this.$message.error('撤销失败');
                    }
                  }).catch(() => {
                    reject()
                  })
                })
              },
              onCancel() {
              },
            });
          }
            // this.editModel = type
            // let query = {
            //     editModel: type,
            //     addpersion: addpersion,
            // }
            // if (record && record.id) {
            //     query.id = record.id
            // }
            // this.$router.push({
            //     name: '/party/organizationManagement/organizationalStructure/updateOrganizationalStructure',
            //     query,
            // })
        },
    },
}
</script>
